<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>个人中心</title>
    <link rel="shortcut icon" href="__CDN__/assetscenter/img/favicon.ico"/>
    <link href="__CDN__/assetscenter/mdui/dist/css/mdui.css" rel="stylesheet">
    <link href="__CDN__/assetscenter/layui/css/layui.css" rel="stylesheet">
    <script src="__CDN__/assetscenter/layui/layui.all.js"></script>
    <style>
        body{
            background-color: pink;
        }
        .body-item {
            margin-top: 10px;
            width: 50%;
            margin-left: 25%;
        }
    </style>
</head>
<body>
<div class="body">
    <div class="mdui-toolbar mdui-color-black">
        <span class="mdui-typo-title">个人中心</span>
        <a href="{:url('index/index/index')}"><span class="mdui-typo-title"> 回到商城</span></a>
        <div class="mdui-toolbar-spacer"></div>
        <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
        <!--<a href="javascript:location.reload();;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>-->
        <!--<a href="javascript: ;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>-->
    </div>

    <div class="body-item">
        <div class="mdui-chip">
            <span class="mdui-chip-icon mdui-color-blue"><i class="mdui-icon material-icons">face</i></span>
            <span class="mdui-chip-title">个人中心</span>
        </div>
        <ul class="mdui-list">
            <li class="mdui-list-item">
                <div class="mdui-list-item-content">
                    <img src="{$member.avatar}" class="mdui-img-circle" width="50px" height="50px" id="preview">
                </div>
                <!--<a href="">更换头像<i class="mdui-list-item-icon mdui-icon material-icons">&#xe5cc;</i></a>-->
                <button type="button" class="layui-btn" style="background-color: #00b8d4" id="test1"><i class="layui-icon">&#xe67c;</i>更换头像</button>
            </li>
            <li class="mdui-list-item">
                <div class="mdui-list-item-content">昵称：</div>
                <!--<a href="">修改昵称<i class="mdui-list-item-icon mdui-icon material-icons">&#xe5cc;</i></a>-->
                <input style="width: 600px" class="mdui-textfield-input" name="nickname" type="text" value="{$member.username }" id="nickname">
            </li>
            <li class="mdui-list-item">
                <div class="mdui-list-item-content">手机号：{$member.mobile}</div>
                <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '手机号作为登录账号不可修改'}">
                    <i class="mdui-list-item-icon mdui-icon material-icons">&#xe88f;</i>
                </button>
            </li>
            <li class="mdui-list-item">
                <div class="mdui-list-item-content">余额：{$member.money}
                    &nbsp;
                    <div class="mdui-chip mdui-color-orange">
                        <span class="mdui-chip-title" style="color: white;">开通会员，低至 0.45元/天，购物享8折</span>
                    </div>
                </div>
                <button type="button" id="invest"  class="layui-btn" style="background-color: pink; color: black;">充值</button>|
                <a href="{:url('index/moneyWhere')}" style="margin-left: 15px;">明细<i class="mdui-list-item-icon mdui-icon material-icons">&#xe5cc;</i></a>
            </li>
            <li class="mdui-list-item">
                <div class="mdui-list-item-content">积分：{$member.score}</div>
                <a href="{:url('index/getScore')}">积分明细<i class="mdui-list-item-icon mdui-icon material-icons">&#xe5cc;</i></a>
            </li>
            <li class="mdui-list-item">
                <div class="mdui-list-item-content">注册时间：{$member.createtime|date="Y-m-d H:i:s",###}</div>
            </li>
        </ul>
        <div class="mdui-chip">
            <span class="mdui-chip-icon mdui-color-blue"><i class="mdui-icon material-icons">&#xe1af;</i></span>
            <span class="mdui-chip-title">数据管理</span>
        </div>
        <ul class="mdui-list">
                <li class="mdui-list-item">
                    <i class="mdui-list-item-icon mdui-icon material-icons">&#xe567;</i>
                    <a href="{:url('index/getAddress')}" class="mdui-list-item-content">收货地址管理</a>
                    <i class="mdui-list-item-icon mdui-icon material-icons">&#xe5cc;</i>
                </li>
            <li class="mdui-divider-inset mdui-m-y-0"></li>
                <li class="mdui-list-item">
                    <i class="mdui-list-item-icon mdui-icon material-icons">&#xe02f;</i>
                    <a  href="{:url('index/index/buyOrder')}" class="mdui-list-item-content">订单管理</a>
                    <i class="mdui-list-item-icon mdui-icon material-icons">&#xe5cc;</i>
                </li>
            <li class="mdui-divider-inset mdui-m-y-0"></li>
            <li class="mdui-list-item">
                <i class="mdui-list-item-icon mdui-icon material-icons">&#xe02f;</i>
                <a  href="{:url('index/index/cart')}" class="mdui-list-item-content">购物车</a>
                <i class="mdui-list-item-icon mdui-icon material-icons">&#xe5cc;</i>
            </li>
        </ul>
        <div class="mdui-chip">
            <span class="mdui-chip-icon mdui-color-blue"><i class="mdui-icon material-icons">&#xe337;</i></span>
            <span class="mdui-chip-title">其它</span>
        </div>
        <ul class="mdui-list">
            <li class="mdui-list-item">
                <i class="mdui-list-item-icon mdui-icon material-icons">&#xe90d;</i>
                <a href="{:url('index/index/change')}" class="mdui-list-item-content">修改密码</a>
                <i class="mdui-list-item-icon mdui-icon material-icons">&#xe5cc;</i>
            </li>
            <li class="mdui-divider-inset mdui-m-y-0"></li>
            <li class="mdui-list-item">
                <i class="mdui-list-item-icon mdui-icon material-icons">&#xe887;</i>
                <a href="{:url('index/index/help')}" class="mdui-list-item-content">帮助与反馈</a>
                <i class="mdui-list-item-icon mdui-icon material-icons">&#xe5cc;</i>
            </li>
            <li class="mdui-divider-inset mdui-m-y-0"></li>
            <li class="mdui-list-item">
                <i class="mdui-list-item-icon mdui-icon material-icons">&#xe8ac;</i>
                <a href="{:url('index/index/LoginOut')}" class="mdui-list-item-content">退出登录</a>
                <i class="mdui-list-item-icon mdui-icon material-icons">&#xe5cc;</i>
            </li>
        </ul>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script src="__CDN__/assets/mdui/dist/js/mdui.js"></script>
<script>
    $(function () {
        layui.use('upload', function(){
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: '{:url("index/upload")}' //上传接口
                ,field: 'image'
                ,done: function(res){
                    //上传完毕回调
                    if (res.code==1){
                        $('#img').val(res.path);
                        $('#preview').attr('src',res.path);
                        location.href = "{:url('index/postImg')}?avatar="+res.path;
                    }else{
                        layer.msg(res.message);
                    }
                }
                ,error: function(){
                    //请求异常回调
                    layer.msg('服务器异常');
                }
            });
        });
        // 当输入昵称失去焦点时
        var oldname = $('#nickname').val();
        $('#nickname').on('blur', function () {
            var nickname = $('#nickname').val();
            if (nickname == oldname){
                return false;
            }
            mdui.dialog({
                content: '<div class="price center">您确定要修改昵称嘛？</div>',
                buttons: [
                    {
                        text: '取消'
                    },
                    {
                        text: '确认',
                        onClick: function(inst){
                            $.ajax({
                                url: "{:url('index/postName')}",
                                type: 'POST',
                                data: {nickname:nickname},
                                success: function (res) {
                                    if (res.code == 1) {
                                        location.href = "{:url('member/center')}";
                                    } else {
                                        layer.msg(res.msg);
                                    }
                                }
                            });
                        }
                    }
                ]
            });
        });

    })
</script>
<script>
    $(function () {
        $('#invest').on('click', function () {
            // var money = $('#invest').val();
            mdui.dialog({
                title: '充值',
                content: '<div class="price center"><input  class="mdui-textfield-input" id="money" name="money" type="text"  placeholder="请输入充值面额" style="width:200px;float:left" /><span style="float:left">元</span></div>',
                buttons: [
                    {
                        text: '取消'
                    },
                    {
                        text: '确认',
                        onClick: function(inst){
                            // layer.msg('正在充值，请稍后……', {}, function () {
                            $.ajax({
                                url: "{:url('index/postMoney')}",
                                type: 'POST',
                                data: {money: $('#money').val()},
                                success: function (res) {
                                    if (res.code == 1) {
                                        alert(res.msg);
                                        location.href = "{:url('member/center')}";
                                    } else {
                                        layer.msg(res.msg);
                                    }
                                }
                            });
                            // });
                        }
                    }
                ]
            });
        });
    })
</script>

</body>